<template>
  <div class="main">
    <h2>质监局管理页面</h2>
    <!-- <hr> -->
    <div class="content">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="送审时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orderId"
          label="订单ID"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="货物名"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          label="数量"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格(元)"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="edit"
          label="审核状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-if="scope.row.isChecked"
            >已审</el-tag>
            <el-tag
              type="warning"
              v-if="!scope.row.isChecked"
            >未审</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="edit"
          label="编辑"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              size="small"
              @click="edit(scope.$index)"
              round
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="审核单"
      :visible.sync="dialogFormVisible"
    >
      <el-form>
        <el-form-item
          label="生产商名"
          :label-width="formLabelWidth"
        >
          <span>{{form.producerName}}</span>
        </el-form-item>

        <el-form-item
          label="生产商地址"
          :label-width="formLabelWidth"
        >
          <span>{{form.producerAddress}}</span>
        </el-form-item>

        <el-form-item
          label="中间商名"
          :label-width="formLabelWidth"
        >
          <span>{{form.middleManName}}</span>
        </el-form-item>

        <el-form-item
          label="中间商地址"
          :label-width="formLabelWidth"
        >
          <span>{{form.middleManAddress}}</span>
        </el-form-item>

        <el-form-item
          label="是否合格"
          :label-width="formLabelWidth"
        >
          <el-select
            placeholder="是否合格"
            v-model="form.isPass"
          >
            <el-option
              label="合格"
              value="1"
            ></el-option>
            <el-option
              label="不合格"
              value="0"
            ></el-option>
          </el-select>
        </el-form-item>
        <img src="../assets/qualified.png" v-if="form.isPass === '1'">
        <img src="../assets/unqualified.png" v-if="form.isPass === '0'">
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submit()"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "InspectionManager",

  data() {
    return {
      tableData: [
        {
          date: "2022-12-01",
          orderId: "12901210",
          goodsName: "切尔西",
          amount: 1,
          price: 666,
          isChecked: '',
          producerName: "李奶奶",
          producerAddress: "0x114115",
          middleManName: "梁志超",
          middleManAddress: "0x114115",
        },
        {
          date: "2022-12-01",
          orderId: "12901210",
          goodsName: "切尔西",
          amount: 1,
          price: 666,
          isChecked: '',
          producerName: "蔡旭鲲",
          producerAddress: "0x114115",
          middleManName: "梁志超",
          middleManAddress: "0x114115",
        },
      ],
      dialogFormVisible: false,

      form: {
        currentIndex:'',
        producerName: '',
        producerAddress: '',
        middleManName: '',
        middleManAddress: '',
        isPass:'',
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    edit(index) {
      this.dialogFormVisible = true;
      this.form.producerName = this.tableData[index].producerName;
      this.form.producerAddress = this.tableData[index].producerAddress;
      this.form.middleManName = this.tableData[index].middleManName;
      this.form.middleManAddress = this.tableData[index].middleManAddress;
      // console.log(index);
      this.form.currentIndex = index;
    },
    submit() {
      this.dialogFormVisible = false;
      this.tableData[this.form.currentIndex].isChecked = this.form.isPass == ''?false:true;
      console.log(this.form.isPass);
    }
  },
};
</script>

<style>
.main h2 {
  text-align: center;
}
.content {
  width: 1000px;
  margin: auto;
}
.el-dialog img {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
}
</style>